<template>
  <el-row type="flex" justify="space-between">
    <!-- 区域 -->
    <div class="area">
      <el-row class="area_spot" type="flex">
        <el-col :span="3" class="tit">区域：</el-col>
        <el-col :span="21" :class="{ hidden_all: spotIsShow }">
          <span
            class="area_spot_item"
            v-for="(item, index) in hotelScenics"
            :key="index"
            >{{ item.name }}</span
          >
          <p @click="switchOpen">
            <i class="el-icon-d-arrow-right"></i> 等{{
              hotelScenics.length
            }}个区域
          </p>
        </el-col>
      </el-row>

      <el-row class="mean_price" type="flex">
        <el-col :span="3" class="tit">
          均价
          <el-tooltip
            effect="dark"
            content="等级均价由平日价格计算得出,节假日价格会上浮"
            placement="top-start"
          >
            <i class="el-icon-question"></i> </el-tooltip
          >:
        </el-col>
        <el-col>
          <el-tooltip
            class="item"
            effect="dark"
            content="等级评定是针对房价，设施和服务等各方面水平的综合评估"
            placement="bottom-start"
          >
            <span class="mean_price_item">
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              ￥441
            </span>
          </el-tooltip>

          <span class="mean_price_item">
            <i class="iconfont iconhuangguan"></i> ￥223
          </span>
          <span class="mean_price_item">
            <i class="iconfont iconhuangguan"></i>
            <i class="iconfont iconhuangguan"></i>
            <i class="iconfont iconhuangguan"></i>
            <i class="iconfont iconhuangguan"></i>

            <span>￥332</span>
          </span>
          <span class="mean_price_item">
            <i class="iconfont iconhuangguan"></i> ￥122
          </span>
        </el-col>
      </el-row>
    </div>
    <!-- 地图 -->
    <div id="container" v-loading="loading"></div>
  </el-row>
</template>

<script>
export default {
  props: {
    hotelLocation: {
      type: Array,
      default: function () {
        return [];
      },
    },
    hotelScenics: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      spotIsShow: true, //是否显示全部景点
      map: null,
      loading: true,
    };
  },
  methods: {
    //打开隐藏区域
    switchOpen() {
      this.spotIsShow = !this.spotIsShow;
    },
    //地图加载初始化
    init() {
      this.map = new AMap.Map("container", "北京", {
        resizeEnable: true,
        zoom: 10,
      });
      //插件定位到当前的城市
      if (!this.$route.query.cityName) {
        AMap.plugin("AMap.CitySearch", () => {
          var citySearch = new AMap.CitySearch();
          citySearch.getLocalCity((status, result) => {
            if (status === "complete" && result.info === "OK") {
              this.$alert(`定位当前城市:${result.city}`, "提示", {
                confirmButtonText: "确定",
                type: "success",
              });
              //调用这个函数的时候如果没有城市的名字,则拼接字符串
              this.$router.push({
                query: {
                  cityName: result.city,
                },
              });
            }
          });
        });
      }

      this.loading = false;
    },
    //监听酒店位置函数
    monitorPostion(val) {
      this.loading = true;
      if (this.map) {
        this.map.clearMap();
        let markerList = [];
        val.forEach((element) => {
          markerList.push(
            new AMap.Marker({
              position: new AMap.LngLat(
                element.location.longitude,
                element.location.latitude
              ), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: element.name,
            })
          );
        });
        // 将创建的点标记添加到已有的地图实例：
        setTimeout(() => {
          this.map.setFitView(markerList);
          this.map.add(markerList);
          this.loading = false;
        }, 2000);
      }
    },
  },
  mounted() {
    //console.log(123);
    //加载地图
    if (!window.AMap) {
      window.onload = () => {
        this.init();
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=d5224385c846cdc088cd6edaa9d607c1";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    } else {
      this.init();
    }
  },
  watch: {
    hotelLocation(val) {
      this.monitorPostion(val);
    },
  },
};
</script>

<style lang="less" scoped>
.el-icon-question {
  color: #ccc;
}
.iconhuangguan {
  color: orange;
}
.tit {
  color: #666;
  font-size: 14px;
}
.area {
  width: 560px;
  .area_spot {
    padding-bottom: 20px;
    position: relative;
    .hidden_all {
      max-height: 3em;
      overflow: hidden;
      i {
        color: orange;
        transform: rotate(90deg);
      }
    }
    p {
      position: absolute;
      bottom: 0;
      cursor: pointer;
      color: #666;
      font-size: 14px;
      i {
        color: orange;
        transform: rotate(270deg);
      }
    }
    .area_spot_item {
      margin-right: 1em;
      padding: 0 2px;
      border-radius: 4px;
      display: inline-block;
      color: #666;
      font-size: 14px;
    }
  }
  .mean_price {
    padding-top: 20px;
    color: #666;
    font-size: 14px;
    .mean_price_item {
      margin-right: 1em;
      padding: 0 2px;
      border-radius: 4px;
      display: inline-block;
      color: #666;
      font-size: 14px;
    }
  }
}

#container {
  width: 420px;
  height: 258px;
}
</style>